<template>
  <div>
    <a-modal
      title="查看品牌"
      v-model:visible="visible"
      width="720px"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
    >
      <a-table :columns="columns" :data-source="data"> </a-table>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
import { TableDataType } from "@/shims/globe";
import { queryBrandsList } from "@/api/account-management";

const columns = [
  {
    title: "品牌名称",
    dataIndex: "platformBrandName",
    key: "platformBrandName"
  },
  {
    title: "品牌编码",
    dataIndex: "platformBrandCode",
    key: "platformBrandCode"
  }
];

export default defineComponent({
  name: "BrandModal",
  setup() {
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const data: TableDataType[] = [
      {
        key: "1",
        platformBrandName: "UE-SAI/羽西",
        platformBrandCode: 201113
      },
      {
        key: "2",
        platformBrandName: "UE-SAI/羽西",
        platformBrandCode: 201113
      },
      {
        key: "3",
        platformBrandName: "UE-SAI/羽西",
        platformBrandCode: 201113
      }
    ];
    const showModal = () => {
      visible.value = true;
    };
    const handelQueryBrandsList = async () => {
      try {
        const res = await queryBrandsList({});
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    };
    visible.value && handelQueryBrandsList();

    const handleOk = () => {
      console.log("***");
    };
    return {
      visible,
      confirmLoading,
      showModal,
      handleOk,
      data,
      columns
    };
  }
});
</script>
